<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });

    var vectorSource = new ol.source.Vector({
        url:"json/a.geojson",
        format:new ol.format.GeoJSON()
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    function  styleFunction(feature,isSelect) {

        var _name="",
            _color="rgba(255, 255, 255, 0.8)";
        if(isSelect==true)
        {
             _name=feature.get("NAME");
             _color= "rgba(255, 0, 0, 0.8)";
        }
        _name=map.getView().getZoom()>4?_name:"";
        return  new ol.style.Style({
            fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
                color:_color
            }),
            stroke: new ol.style.Stroke({ //边界样式
                color: '#319FD3',
                width: 1
            }),
            text: new ol.style.Text({ //文本样式
                text:_name,
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 3
                }),
                //textAlign:"left",
                offsetX:"0"
            })
        });
    }
    //select
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[vectorLayer],
        multi:true,
        style:function (feature) {
            return styleFunction(feature,true);
        }
    });
    select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];
        var geometry=feature.getGeometry();
        var attribute=  feature.getProperties();
        var temp=attribute["NAME"];
        temp=attribute.NAME;
        var coordinates=geometry.getCoordinates();
        var polygons=geometry.getPolygons();
        var polygon=geometry.getPolygon(0);


        alert(feature.get("NAME"));
    });
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view:view,
        target: 'map'
    });
    map.addLayer(vectorLayer);
    map.addInteraction(select);

    
    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>